<template>
	<gui-page :customHeader="true" :headerClass="['gui-bg-gray', 'gui-dark-bg-level-1']" ref="guiPage" :fullPage="true">
		<!-- 自定义头部导航 -->
		<template v-slot:gHeader>
			<view style="height:44px;" class="gui-flex gui-nowrap gui-rows gui-align-items-center">
				<!-- 使用组件实现返回按钮及返回首页按钮 -->
				<gui-header-leading :home="false" :back="false"></gui-header-leading>
				<!-- 导航文本此处也可以是其他自定义内容 -->
				<view style="width:120rpx;"></view>
				<text class="gui-flex1 gui-text-center gui-ellipsis">个人中心</text>
				<!-- 此处加一个右侧展位元素与左侧同宽，实现标题居中 -->
				<!-- 实际宽度请根据自己情况设置 -->
				<view style="width:120rpx;"></view>
				<!-- 如果右侧有其他内容可以利用条件编译和定位来实现-->
			</view>
		</template>
		<!-- 页面主体 -->
		<template v-slot:gBody>
			<view :style="{height:mainHeight+'px', width:'750rpx',backgroundColor:'#F5F5F5'}"
				style="position: relative;;">
				<view class="card" style="margin-top:24rpx;">
					<view class="avatar">
						<image src="@/static/assets/005.png" style="width:120rpx;border-radius: 50%;" mode="widthFix">
						</image>
					</view>
					<view class="card-login-container">
						<view class="card-login-text" v-if="user">
							{{user.name}}
						</view>
						<view class="card-login-text" v-else>
							未绑定
						</view>
						<view class="card-login-tips" v-if="user">
							{{user.mobile}}
						</view>
						<view class="card-login-tips" v-else>
							未绑定
						</view>
					</view>
				</view>

				<view class="func" style="margin-top:24rpx;">
					<view class="" style="height:58rpx;width:100%">

					</view>
					<view class="func-container">
						<view class="func-item" @tap="toHistory">
							<view class="func-icon">
								<image src="@/static/assets/user/lishixiaofei.png" mode=""
									style="width:48rpx;height:48rpx;"></image>
							</view>
							<view class="func-text">
								历史工单
							</view>
						</view>
						<view class="func-item" @tap="resetPwd">
							<view class="func-icon">
								<image src="@/static/assets/user/jichuziliao.png" mode="widthFix" style="width:48rpx;">
								</image>
							</view>
							<view class="func-text">
								密码管理
							</view>
						</view>
						<view class="func-item" @tap="toStatistic">
							<view class="func-icon">
								<image src="@/static/assets/user/yijianfankui.png" mode=""
									style="width:48rpx;height:48rpx;"></image>
							</view>
							<view class="func-text">
								数据统计
							</view>
						</view>
						<view class="func-item" @tap="toSug">
							<view class="func-icon">
								<image src="@/static/assets/suggestion.png" mode=""
									style="width:48rpx;height:48rpx;"></image>
							</view>
							<view class="func-text">
								意见反馈
							</view>
						</view>
					</view>

				</view>
				
				<view class="bill gui-flex gui-justify-content-center gui-align-items-center"
					style="width:100%; position: absolute;bottom: 100rpx;">
					<button type="default" class="gui-button gui-bg-red gui-noborder" style="width:320rpx;"
						@tap="logout">
						<text class="gui-color-white gui-button-text">退出登录</text>
					</button>
				</view>
			</view>
		</template>
	</gui-page>
</template>
<script>
	import request from '@/utils/request'
	import graceJs from '@/Grace6/js/grace.js';
	import useUser from "@/api/user";
	const {
		wechatLogout
	} = useUser()
	export default {
		data() {
			return {
				mainHeight: 300,
				user: {}
			}
		},
		created() {
			let user = uni.getStorageSync("user")
			if (user) {
				this.user = JSON.parse(user)
			}
		},
		onReady: function() {

			uni.getSystemInfo({
				success: (res) => {
					console.log(res)
					this.mainHeight = res.windowHeight - res.statusBarHeight - 44
				}
			});
			// setTimeout(() => {
			// 	graceJs.getRefs('guiPage', this, 0, (ref) => {
			// 		ref.getDomSize('guiPageBody', (e) => {
			// 			console.log(e)
			// 			this.mainHeight = e.height;
			// 			console.log("====",this.mainHeight)
			// 		});
			// 	});
			// }, 500);
		},
		methods: {
			goHome: function() {
				uni.redirectTo({
					url: '/pages/index/index'
				})
			},
			toHistory() {
				uni.navigateTo({
					url: `/subpage/user/history`
				})
			},
			toAddress() {
				uni.navigateTo({
					url: `/subpage/user/address-list`
				})
			},
			toStatistic() {
				uni.navigateTo({
					url: `/subpage/user/statistics`
				})
			},
			resetPwd(){
				uni.navigateTo({
					url: `/subpage/user/forget`
				})
			},
			toSug(){
				uni.navigateTo({
					url: `/subpage/user/suggestion`
				})
			},
			async logout() {
				await wechatLogout();
				uni.clearStorageSync();
				uni.$roles = null;
				setTimeout(() => {
					uni.reLaunch({
						url: `/subpage/login/index`
					})
				}, 500)
			}

		}
	}
</script>
<style scoped lang="scss">
	.card {
		width: 702rpx;
		margin: 0 24rpx;
		height: 190rpx;
		background-color: white;
		border-radius: 16rpx;
		display: flex;
		justify-content: flex-start;
		align-items: center;

		.avatar {
			margin-left: 30rpx;
			width: 120rpx;
			height: 120rpx;
			border-radius: 120rpx;
			background-color: transparent;
			border: 2rpx solid #ddd;
		}

		.card-login-container {
			margin-left: 30rpx;

			.card-login-text {
				font-size: 36rpx;
				font-weight: bold;
				line-height: 50rpx;
			}

			.card-login-tips {
				font-size: 28rpx;
				line-height: 40rpx;
				color: #666666;
			}
		}
	}

	.func {
		width: 702rpx;
		margin: 0 24rpx;
		height: 190rpx;
		background-color: white;
		border-radius: 16rpx;

		.func-container {
			padding: 0 30rpx;
			box-sizing: border-box;
			display: flex;
			align-items: center;



			.func-item {
				width: 96rpx;
				height: 100rpx;
				display: flex;
				margin-right: 90rpx;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				box-sizing: border-box;

				&:nth-last-child(1) {
					margin-right: 0;
				}

				.func-icon {
					width: 48rpx;
					height: 49rpx;
				}

				.func-text {
					font-size: 24rpx;
					margin-top: 18rpx;
					box-sizing: border-box;
					font-weight: bold;
				}
			}

		}
	}

	.bill {
		padding: 0 24rpx;
		box-sizing: border-box;
	}
</style>